<template>
  <div class="homePro frame_content" style="padding-bottom: 20px">
    <div class="headerPro">
      <div style="line-height:32px">
        <!--<a href="home.html" target="_blank">新窗口打开</a>-->
        <b style="color:red; margin-left: 18px"> 安卓下载： </b>
        <a
                :href="homeList.download.android"
                target="_blank"
                class="downLoad1"
        >打开
        </a>
        <a
                @click="copy1"
                class="btn copy downLoad1Copy"
                :data-clipboard-text="homeList.download.android"
        >复制</a
        >
        <b style="color: red;margin-left: 18px"> IOS下载： </b>
        <a
                :href="homeList.download.ios"
                target="_blank"
                class="downLoad1"
        >打开
        </a>
        <a
                @click="copy2"
                class="btn copy downLoad2Copy"
                :data-clipboard-text="homeList.download.ios"
        >复制</a
        >
        <b style="color:red; margin-left: 18px"> IOS安装说明： </b>
        <a
                :href="homeList.download.description"
                target="_blank"
                class="downLoad1"
        >打开
        </a>
      </div>
      <div style="line-height:32px" class="gameList">
        <a
                href="javascript:void(0);"
                v-for="(item, index) in homeList.lottery"
                :key="item.id"
                @click="chagecolor(item,index)"
                :class="[
            'btn',
             { btndanger: item.status == 2, 'btn-success': item.status == 1 }
          ]"
        >{{ item.lottert_name}}<span>{{ item.status == 1 ? '关闭' : '开启' }}</span></a
        >
        <!--<span-->
                <!--@click="chagecolor('red_envelope','B')"-->
                <!--:class="['btn',{ btndanger: red_envelope == 2, 'btn-success': red_envelope == 1 }]">{{red_envelope == 1 ? "红包 关闭" : "红包 开启"}}</span>-->
      </div>
    </div>
    <table class="table common table-bordered">
      <thead>
      <tr style="color: red">
        <th colspan="2">今日总上分</th>
        <th colspan="3" class="totalUp">{{homeList.add }}</th>
        <th colspan="1">今日总回分</th>
        <th colspan="3" class="totalDown">{{ homeList.take }}</th>
      </tr>
      <tr>
        <th>头像</th>
        <th>用户Id</th>
        <th>账户余额</th>
        <th>账户名称</th>
        <th>上/下分金额</th>
        <th>申请时间</th>
        <th>上分/下分</th>
        <th>游戏名称</th>
        <!-- <th>管理操作</th> -->
      </tr>
      </thead>
      <tbody id="list">
      <tr v-for="item in homeList.list" :key="item.id">
        <td>
          <img :src="item.logo" />
        </td>
        <td>{{ item.account_id }}</td>
        <td>{{ item.balance }}</td>
        <td>{{ item.nickname }}</td>
        <td>
            <span
                    :style="item.pay_money > 0 ? 'color: red' : 'color: blue'"
                    style="font-weight: bold"
            >{{
                item.pay_money > 0
                  ? "上" + item.pay_money
                  : "回" + -item.pay_money
              }}{{
            }}</span>
        </td>
        <td>{{ item.create_time }}</td>
        <td>
            <span
                    :style="
                item.change == 'add'
                  ? item.status == 2
                    ? 'color: #3ADF00'
                    : 'color:red'
                  : 'color : blue'
              "
            >
              {{
                item.status == 0
                  ? item.change == "add"
                    ? "申请上分"
                    : "申请下分"
                  : item.status == 1
                  ? item.change == "add"
                    ? item.manual_status == 1
                      ? "手动上分成功(手动上分)"
                      : "上分成功"
                    : item.manual_status == 1
                    ? "手动下分成功(手动下分)"
                    : "下分成功"
                  : item.chenge == "add"
                  ? "上分失败(手动拒绝)"
                  : "下分失败(手动拒绝)"
              }}
            </span>
        </td>
        <td>{{ lottery[item.lottery_id] }}</td>
        <!-- <td>
          <div
            ref="score"
            :style="item.status == 0 ? 'display:block' : 'display: none'"
          >
            <a
              href="javascript:void(0);"
              @click="AgreeScore(item)"
              style="color:#08c"
              >同意</a
            >
            <i>|</i>
            <a
              href="javascript:void(0);"
              @click="cancelScore(item)"
              style="color:#08c"
              >取消</a
            >
          </div>
        </td> -->
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  import Clipboard from "clipboard";
  import http from "@/utils/http";
  import { mapState, mapActions } from "vuex";
  export default {
    data() {
      return {
        danger: "btndanger",
        lottery: [
          "重庆时时彩",
          "PK拾",
          "幸运飞艇",
          "极速赛车",
          "澳洲5",
          "澳洲10"
        ],
        btnlists: []
      };
    },
    computed: {
      ...mapState("home", ["homeList","color_list","download","red_envelope"])
    },
    methods: {
      ...mapActions("home", ["getHomeList","get_color","switch_btn"]),
      chagecolor(color,index) {//彩种切换
        let token=sessionStorage.getItem('token')
        let account=JSON.parse(localStorage.getItem('account'));
        console.log(this.homeList.lottery[index])
        let status = this.homeList.lottery[index].status;
        let account_id=account.id;
        let project_name=color.project_name;
        if (status == 1) {
          status=2;
        } else {
          status=1;
        }
        console.log(status,'statu')
        http
          .post(
            `/api/login/agent_lottery/lottery_status?token=${token}&agent_account_id=${account_id}&status=${status}&project_name=${project_name}`
          )
          .then(response => {
            this.homeList.lottery[index].status = status
            console.log(response,'----------------------');
          });
      },
      // 同意上下分
      AgreeScore(item) {
        let token=sessionStorage.getItem('token');
        http
          .post(
            `/api/login/add_balance/edit?token${token}=&id=${item.id}`
          )
          .then(response => {
            console.log(response);
            this.getHomeList();
          });
      },
      // 拒绝上下分
      cancelScore(item) {
        http
          .post(
            `/api/login/add_balance/failure?id=${item.id}&token=2Q3ntNqyo5eaLmXITABb`
          )
          .then(response => {
            console.log(response);
            this.getHomeList();
          });
      },
      copy1() {
        let clipboard = new Clipboard(".downLoad1Copy");
        clipboard.on("success", () => {
          alert("复制成功");
          clipboard.destroy(); //使用destroy可以清楚缓存
        });
        clipboard.on("error", () => {
          alert("failed");
          clipboard.destroy();
        });
      },
      copy2() {
        let clipboard = new Clipboard(".downLoad2Copy");
        clipboard.on("success", () => {
          alert("复制成功");
          clipboard.destroy(); //使用destroy可以清楚缓存
        });
        clipboard.on("error", () => {
          alert("failed");
          clipboard.destroy();
        });
      },
      copy3() {
        let clipboard = new Clipboard(".downLoad3Copy");
        clipboard.on("success", () => {
          alert("复制成功");
          clipboard.destroy(); //使用destroy可以清楚缓存
        });
        clipboard.on("error", () => {
          alert("failed");
          clipboard.destroy();
        });
      },
    },
    created() {
      this.getHomeList();
      //  请求页面所有数据

    }
  };
</script>

<style>
  .frame_content {
    position: absolute;
    top: 144px;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .homePro {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 20px;
    color: #333;
    background-color: #fff;
  }
  .headerPro {
    font-size: 120%;
    padding: 4px 10px 14px 20px;
  }
  .headerPro a {
    color: #08c;
    text-decoration: none;
  }
  .headerPro a:hover,
  a:focus {
    color: #005580;
    text-decoration: underline;
  }
  .headerPro b {
    font-weight: bold;
  }
  .headerPro .btn {
    margin-right: 8px;
    display: inline-block;
    margin-bottom: 0px;
    font-size: 14px;
    line-height: 20px;
    color: rgb(51, 51, 51);
    text-align: center;
    text-shadow: rgba(255, 255, 255, 0.75) 0px 1px 1px;
    vertical-align: middle;
    cursor: pointer;
    background-color: rgb(245, 245, 245);
    background-image: linear-gradient(rgb(255, 255, 255), rgb(230, 230, 230));
    box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px inset,
    rgba(0, 0, 0, 0.05) 0px 1px 2px;
    padding: 4px 12px;
    background-repeat: repeat-x;
    border-width: 1px;
    border-style: solid;
    border-image: initial;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgb(179, 179, 179);
    border-radius: 4px;
  }
  .headerPro .btn:hover,
  .btn:focus {
    color: #333;
    text-decoration: none;
    background-position: 0 -15px;
    transition: background-position 0.1s linear;
    background-color: #e6e6e6;
  }
  .headerPro .btn-success {
    color: rgb(255, 255, 255);
    text-shadow: rgba(0, 0, 0, 0.25) 0px -1px 0px;
    background-color: rgb(91, 183, 91);
    background-image: linear-gradient(rgb(98, 196, 98), rgb(81, 163, 81));
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  }

  .headerPro .btndanger {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #bd362f;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-image: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#ee5f5b),
            to(#bd362f)
    );
    background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
    background-repeat: repeat-x;
    border-color: #bd362f #bd362f #802420;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  }

  .headerPro .btndanger:hover {
    color: #fff;
    background-color: #bd362f;
    *background-color: #a9302a;
  }
  .headerPro .btn-success:hover {
    color: #fff;
    background-color: #51a351;
  }
  .table-bordered {
    width: 96%;
    margin: auto;
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    max-width: 100%;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .table thead th {
    vertical-align: bottom;
  }
  .table th {
    background-color: #eaeaea;
  }
  .table td,
  .table th {
    padding-top: 8px;
    padding-bottom: 4px;
    line-height: 20px;
  }
  .table-bordered th,
  .table-bordered td {
    border-left: 1px solid #ddd;
  }
  .table th {
    font-weight: bold;
  }
  .table th,
  .table td {
    padding: 8px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #ddd;
  }
  .table th,
  .table td {
    word-break: keep-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
  }
  #list img {
    display: block;
    width: 30px;
    height: 30px;
  }
</style>
